﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this example is demonstrated how the get all orders by a selected Employee. Select an Employee from the ComboBox.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
	$(document).ready(function () {
		

		// prepare the data
		var employeeSource =
		{
			datatype: "json",
			datafields: [
			{ name: 'EmployeeID', type: 'int'},
			{ name: 'FirstName', type: 'string'},
			{ name: 'LastName', type: 'string'},
			{ name: 'Name', type: 'string'}
			],
			url: "combobox_and_grid_employees.php",
			async: false
		};

		var employeesDataAdapter = new $.jqx.dataAdapter(employeeSource);

		// create a comboBox. 
		// The displayMember specifies that the list item's text will be the Employee's Name. 
		// The valueMember specifies that the list item's value will be the Employee's ID.
		$("#jqxcombobox").jqxComboBox(
		{
			width: 250,
			height: 25,
			source: employeesDataAdapter,
			
			promptText: 'Select an Employee',
			selectedIndex: -1,
			displayMember: 'Name',
			valueMember: 'EmployeeID'
		});

		$("#jqxcombobox").bind('select', function(event)
		{
			// get employee's ID.
			var employeeID = event.args.item.value;
			// prepare the data
			var ordersSource =
			{
				datatype: "json",
				datafields: [
				{ name: 'EmployeeID', type: 'string', values: { source: employeesDataAdapter.records,  name: 'Name' }},
				{ name: 'OrderDate', type: 'date'},
				{ name: 'ShipCity', type: 'string'},
				{ name: 'ShipAddress', type: 'string'},
				{ name: 'ShipCountry', type: 'string'}
				],
				type: 'POST',
				data: {EmployeeID:employeeID},
				url: "combobox_and_grid_orders.php"
			};

			var dataAdapter = new $.jqx.dataAdapter(ordersSource);
			$("#grid").jqxGrid({ 
			source: dataAdapter,
			columns: 
			[
				{datafield: "EmployeeID", text: "Employee", width: '30%'},
				{datafield: "OrderDate", cellsformat: "d", text: "Order Date", width: '30%'},
				{datafield: "ShipCity", text: "Ship City", width: '25%'},
				{datafield: "ShipAddress", text: "Ship Address", width: '25%'},
				{datafield: "ShipCountry", text: "Ship Country", width: '20%'}
			]
			});
		}); 
	});
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <span>Get Orders by Employee:</span>
        <div style="margin-top: 7px; margin-bottom: 5px;" id="jqxcombobox"></div>
		<div id="grid"></div>
    </div>
</body>
</html>
<!--combobox_and_grid_employees.php
  #Include the connect.php file
   include('connect.php');
  #Connect to the database
  //connection String

$mysqli = new mysqli($hostname, $username, $password, $database);
	/* check connection */
	if (mysqli_connect_errno()) {
		printf("Connect failed: %s\n", mysqli_connect_error());
		exit();
	}

  // get data and store in a json array
    $query = "SELECT EmployeeID, FirstName, LastName FROM Employees";
	$result = $mysqli->prepare($query);
	$result->execute();
	
	/* bind result variables */
	$result->bind_result($EmployeeID, $FirstName, $LastName);
	/* fetch values */
	while ($result -> fetch()) {
	  $employees[] = array(
          'EmployeeID' => $EmployeeID,
          'FirstName' => $FirstName,
	      'LastName' => $LastName,
	      'Name' => $FirstName . " " . $LastName
      );
}	

echo json_encode($employees);

	/* close statement */
$result->close();
	/* close connection */
$mysqli->close();
-->
<!--combobox_and_grid_orders.php
  #Include the connect.php file
  include ('connect.php');

// Connect to the database
// connection String
$mysqli = new mysqli($hostname, $username, $password, $database);
/* check connection */
if (mysqli_connect_errno())
	{
	printf("Connect failed: %s\n", mysqli_connect_error());
	exit();
	}
// get data and store in a json array
$query = "SELECT EmployeeID, OrderDate, ShipCity, ShipAddress, ShipCountry  FROM Orders where EmployeeID=?";
$result = $mysqli->prepare($query);
$result->bind_param('i', $_POST["EmployeeID"]);
$result->execute();
/* bind result variables */
$result->bind_result($EmployeeID, $OrderDate, $ShipCity, $ShipAddress, $ShipCountry);
/* fetch values */
while ($result->fetch())
	{
	$orders[] = array(
		'EmployeeID' => $EmployeeID,
		'OrderDate' => $OrderDate,
		'ShipCity' => $ShipCity,
		'ShipAddress' => $ShipAddress,
		'ShipCountry' => $ShipCountry
	);
	}
echo json_encode($orders);
/* close statement */
$result->close();
/* close connection */
$mysqli->close();
-->